8. Positioning & Display in CSS

1. position: static

Explanation: Ye CSS ka default position hota hai. Koi special positioning nahi hoti. Element page me normal flow me appear hota hai.

<div style="position: static; background: lightcoral; padding: 20px;"> Ye static position hai (default). </div> Run Code

2. position: relative

Element apni original jagah se shift ho sakta hai using top, left, right, bottom. Lekin uski original space remain karti hai.

<div style="position: relative; top: 20px; left: 20px; background: orange; padding: 20px;"> Relative position se element shift ho gaya. </div> Run Code

3. position: absolute

Ye element apne closest relative ancestor ke respect me position leta hai. Agar na mile to body ke respect me hota hai.

<div style="position: relative; height: 150px; background: lightgray;"> <div style="position: absolute; top: 10px; right: 10px; background: steelblue; color: white; padding: 10px;"> Absolute Box </div> </div> Run Code

4. position: fixed

Ye element viewport me fix rahta hai. Page scroll hone ke baad bhi wahi dikhta hai.

<div style="position: fixed; bottom: 10px; right: 10px; background: purple; color: white; padding: 10px;"> Fixed Position Box </div> <p style="height: 400px;">Scroll karke dekho...</p> Run Code

5. position: sticky

Scroll karte waqt ye element chipak jata hai kisi position par. Useful for headers.

<div style="position: sticky; top: 0; background: gold; padding: 10px;"> Sticky Header </div> <p style="height: 400px;">Scroll down to test sticky behavior.</p> Run Code

6. z-index

z-index use hota hai layers define karne ke liye — kaunsa element upar ya niche dikhna chahiye.

<div style="position: relative; z-index: 1; background: red; color: white; padding: 20px; margin-top: 30px;"> Z-index: 1 </div> <div style="position: relative; z-index: 2; background: green; color: white; padding: 20px; margin-top: -40px;"> Z-index: 2 (Upar) </div> Run Code

7. Display: block, inline, inline-block, none

display property se element ka layout behavior define hota hai.

<div style="display: block; background: #cce; padding: 10px;">Block Element</div> <span style="display: inline; background: #ecc;">Inline</span> <div style="display: inline-block; background: #cec; padding: 10px;">Inline-Block</div> Run Code

8. display: flex

flex layout horizontal ya vertical direction me elements ko align karta hai easily.

<div style="display: flex; gap: 10px;"> <div style="background: salmon; padding: 20px;">Item 1</div> <div style="background: skyblue; padding: 20px;">Item 2</div> </div> Run Code

9. display: grid

grid layout rows & columns me items ko arrange karta hai. Ye complex layout banane me best hai.

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;"> <div style="background: lightgreen; padding: 20px;">Grid 1</div> <div style="background: lightcoral; padding: 20px;">Grid 2</div> </div> Run Code